<template>
  <div class="shop">
    <div
      class="bg"
      :style="{
        backgroundImage:
          'url(' + 'https://elm.cangdu.org/img/' + shopList.image_path + ')',
      }"
    ></div>
    <div class="shop-header">
      <div class="shop-desc">
        <div class="shop-desc-title">
          <img
            v-lazy="'https://elm.cangdu.org/img/' + shopList.image_path"
            alt=""
          />
          <div class="shop-desc-title-right">
            <h3>{{ shopList.name }}</h3>
            <p>商家配送／分钟送达／配送费¥5</p>
            <p>{{ shopList.promotion_info }}</p>
          </div>
        </div>

        <div class="shop-sale" v-show="shopList.activities">
          <div class="shop-sale-left">
            <span
              w-show="index == 0"
              v-for="(item, index) in shopList.activities"
              :key="index"
              >{{ item.description }}</span
            >
          </div>
          <div class="shop-sale-right"></div>
        </div>
      </div>
    </div>
    <div class="shop-bar">
      <div class="goods">
        <span class="active">商品</span>
      </div>
      <div class="pinglun">
        <span>评论</span>
      </div>
    </div>
    <div class="shop-content" ref="shopContent">
      <div class="shop-content-left" :style="{ height: myHeight + 'px' }">
        <scroll
          :sHeight="myHeight - 20 + ''"
          style="overflow: hidden"
          :data="foodList"
        >
          <div
            class="food-title-item"
            v-for="(item, index) in foodList"
            :key="index"
            :class="tabIndex == index ? 'active' : ''"
            @click="tabClick(index)"
          >
            {{ item.name }}
            <span v-show="item.counts > 0">{{ item.counts }}</span>
          </div>
        </scroll>
      </div>
      <div class="shop-content-right" :style="{ height: myHeight + 'px' }">
        <scroll
          :sHeight="myHeight + ''"
          style="overflow: hidden"
          :listenScroll="true"
          :probeType="3"
          @scroll="listScroll"
          :data="foodList"
          :pullup="true"
          @scrollToEnd="scrollEnd"
          ref="foodScroll"
        >
          <div ref="foodList">
            <div
              class="food-box"
              v-for="(item, index) in foodList"
              :key="index"
            >
              <h3 class="food-title">{{ item.name }}</h3>
              <div class="food-item" v-for="(val, i) in item.foods" :key="i">
                <div class="food-item-left">
                  <img
                    v-lazy="'https://elm.cangdu.org/img/' + val.image_path"
                    alt=""
                  />
                </div>
                <div class="food-item-right">
                  <p class="food-name">{{ val.name }}</p>
                  <p class="sub-name" v-show="val.pinyin_name">
                    {{ val.pinyin_name }}
                  </p>
                  <div class="food-desc">
                    <span
                      >月售<span style="color: #f60">{{
                        val.month_sales
                      }}</span></span
                    >
                    <span
                      >好评率<span>{{ val.satisfy_rate + "%" }}</span></span
                    >
                  </div>
                  <div class="food-center">
                    <p class="food-price">
                      ￥<span style="font-size: 0.426667rem">{{
                        val.specfoods[0].price
                      }}</span>
                    </p>
                    <div class="cart">
                      <cart-controll
                        :selectFoods="val.specfoods"
                        @showMore="showIsMore(val.specfoods)"
                      ></cart-controll>
                      <!-- <cart-controll
                        v-show="val.specfoods.length < 2"
                        :selectFoods="val.specfoods[0]"
                      ></cart-controll> -->
                      <!-- <div
                        class="more"
                        v-show="val.specfoods.length > 1"
                        @click="selectMore(val)"
                      >
                        <span class="duo">多规格</span>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroll>
      </div>
    </div>
    <more v-show="isMore" :moreObj="moreObj" @close="closeMore"></more>
    <!-- 占位 -->
    <div style="width: 100%; height: 1.2rem"></div>
    <shop-bottom :selectFoods="selectFoods"></shop-bottom>
  </div>
</template>

<script>
import shopBottom from "../components/shop/shopBottom";
import cartControll from "../components/shop/cartcontroll";
import scroll from "../components/common/scroll";
import more from "../components/shop/more";
import { getFood, getShop } from "../api/api";

export default {
  components: {
    shopBottom,
    scroll,
    cartControll,
    more,
  },
  // computed: {
  //   selectFoods() {
  //     let foods = [];
  //     this.foodList.forEach((goods) => {
  //       console.log(goods);
  //     });
  //   },
  // },
  data() {
    return {
      myHeight: 0,
      foodList: [],
      tabIndex: 0,
      //食品列表高度区间
      foodListHeight: [0],
      //商铺信息
      shopList: {},
      //是否显示多规格
      isMore: false,
      //多规格数据
      moreObj: [],
      currentIndex: 0,
    };
  },
  computed: {
    selectFoods() {
      let arr = [];
      this.foodList.forEach((goods, index) => {
        if (goods.counts) {
          goods.counts = 0;
        }
        goods.foods.forEach((food) => {
          food.specfoods.forEach((xfood) => {
            if (xfood.count) {
              arr.push(xfood);
              if (!this.foodList[index].counts) {
                this.$set(this.foodList[index], "counts", xfood.count);
              } else {
                this.foodList[index].counts += xfood.count;
              }
            }
          });
        });
      });
      return arr;
    },
  },
  watch: {
    foodList() {
      this.$nextTick(() => {
        //获取foodList，然后求出高度区间
        let arr = this.$refs.foodList.getElementsByClassName("food-box");

        let height = 0;
        this.foodListHeight = [];
        this.foodListHeight.push(height);
        for (let i = 0; i < arr.length; i++) {
          height += arr[i].clientHeight;
          this.foodListHeight.push(height);
        }
      });
    },
  },
  methods: {
    showIsMore(val) {
      this.moreObj = val;
      this.isMore = true;
    },
    //选着多规格
    selectMore(val) {
      this.moreObj = val;
      this.isMore = true;
    },
    //关闭多规格的mask
    closeMore() {
      this.isMore = false;
    },
    tabClick(index) {
      //添加class
      this.tabIndex = index;
      //之后跳转对应的element
      let arr = this.$refs.foodList.getElementsByClassName("food-box");
      this.$refs.foodScroll.scrollToElement(arr[index], 300);
    },
    listScroll(pos) {
      let scrollY = Math.abs(Math.round(pos.y));
      if (this.foodListHeight.length > 0) {
        for (let index = 0; index < this.foodListHeight.length - 1; index++) {
          if (
            scrollY >= this.foodListHeight[index] &&
            scrollY < this.foodListHeight[index + 1]
          ) {
            this.tabIndex = index;
          }
        }
      }
    },
    scrollEnd() {
      this.tabIndex = this.foodListHeight.length - 2;
    },
  },
  created() {
    //获取商铺的id通过id去查找商铺商品
    let shopId = this.$route.params.id;
    getShop(shopId).then((res) => {
      this.shopList = res;
    });
    //对应商铺的食品列表
    getFood({ restaurant_id: shopId }).then((res) => {
      this.foodList = res;
      //获取到数据之后  我们需要求出区间值
      this.$nextTick(() => {});
    });
  },
  mounted() {
    this.$nextTick(() => {
      //shop-bar : 45px
      let h =
        document.body.offsetHeight - this.$refs.shopContent.offsetTop - 45;
      this.myHeight = h;
    });
  },
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 100%;
  .bg {
    width: 100%;
    height: 6.666667rem;
    background: url("https://elm.cangdu.org/img/17902d9e73a91070.jpg") no-repeat
      center;
    background-size: 100% 100%;
    filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
  }
  .shop-header {
    width: 100%;
    height: 3.066667rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    background-color: rgba(119, 103, 137, 0.43);
    .shop-desc {
      width: 100%;
      box-sizing: border-box;
      padding: 0.2rem;
      .shop-desc-title {
        display: flex;
        img {
          width: 1.813333rem;
          height: 1.813333rem;
        }
        .shop-desc-title-right {
          width: 100%;
          color: #fff;
          padding-left: 0.32rem;
          h3 {
            font-size: 0.48rem;
            margin-bottom: 0.32rem;
          }
          p {
            margin-bottom: 0.2rem;
            width: 100%;
            padding-right: 0.8rem;
            overflow: hidden;
            box-sizing: border-box;
          }
        }
      }
      .shop-sale {
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-right: 0.32rem;
        .shop-sale-right::after {
          content: "";
          display: inline-block;
          width: 0.266667rem;
          height: 0.266667rem;
          background: url("../static/img/right.png") no-repeat center;
          background-size: contain;
          margin-left: 0.133333rem;
        }
      }
    }
  }
  .shop-bar {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #333;
    font-size: 0.453333rem;
    padding-top: 0.26rem;
    padding-bottom: 0.64rem;
    border-bottom: 1px solid #ebebeb;
    span {
      padding: 0.133333rem;
    }
    span.active {
      border-bottom: 2px solid #3190e8;
      color: #3190e8;
    }
    .goods {
      flex: 1;
      text-align: center;
    }
    .pinglun {
      flex: 1;
      text-align: center;
    }
  }
  .shop-content {
    position: relative;
    width: 100%;
    display: flex;
    .shop-content-left {
      width: 20%;
      height: 100%;
      background-color: #f5f5f5;
      box-sizing: border-box;
      padding-bottom: 0.533333rem;
      .food-title-item {
        width: 100%;
        padding: 0.32rem 0.133333rem;
        box-sizing: border-box;
        background-color: #f5f5f5;
        font-size: 0.373333rem;
        text-align: center;
        white-space: pre-wrap;
        word-break: break-word;
        position: relative;
        &.active {
          border-left: 2px solid #3190e8;
          background-color: #fff;
        }
        span {
          padding: 0.133333rem;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;
          width: 0.133333rem;
          height: 0.133333rem;
          line-height: 0.133333rem;
          font-size: 0.32rem;
          color: #fff;
          background-color: #3190e8;
          border-radius: 50%;
          text-align: center;
          text-indent: -0.013333rem;
        }
      }
    }
    .shop-content-right {
      width: 80%;
      background-color: #fff;
      .food-box {
        box-sizing: border-box;
        .food-title {
          font-size: 0.346667rem;
          color: #333;
          font-weight: normal;
          background-color: #f5f5f5;
          padding: 0.133333rem 0.32rem;
        }
        .food-item {
          display: flex;
          padding: 0.32rem;
          border-bottom: 1px solid #f5f5f5;
          .food-item-left {
            width: 1.226667rem;
            height: 1.226667rem;
            img {
              height: 100%;
            }
          }
          .food-item-right {
            flex: 1;
            margin-left: 0.266667rem;
            .food-name {
              font-size: 0.4rem;
              font-weight: bold;
              margin-bottom: 0.133333rem;
            }
            .sub-name {
              font-size: 0.32rem;
              color: #999;
              margin-bottom: 0.133333rem;
            }
            .food-desc {
              font-size: 0.32rem;
              margin-bottom: 0.2rem;
              span {
                margin-right: 0.2rem;
              }
            }
            .food-center {
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;
              .food-price {
                color: #f60;
                font-size: 0.32rem;
              }
              .more {
                padding-right: 0.32rem;
                .duo {
                  display: inline-block;
                  padding: 0.066667rem 0.133333rem;
                  background-color: #3190e8;
                  color: #fff;
                  font-size: 0.32rem;
                  border-radius: 0.15rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>